﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>中国地图</title>
    <meta charset="utf-8" />
    <script src="../js/mapbox-gl.js"></script>
    <link href="../css/mapbox-gl.css" rel="stylesheet" />
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        #map {
            height: 100%;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        var map = new mapboxgl.Map({
            container: 'map',
            center: [105.7350860781, 34.3459367715],
            zoom: 3,
            style: {
                "version": 8,
                //我使用的这个版本sprite要写全路径
                "sprite": "http://localhost:61477/sprites/sprite",
                //字体.pbf文件获取
                "glyphs": "../fonts/{fontstack}/{range}.pbf",
                "sources": {
                    "china": {
                        //矢量类型
                        "type": "vector",
                        //服务类型 tms，要使用wmts服务请换成wmts
                        "scheme": "tms",
                        "tiles": [
                            //获取GeoServer 矢量切片服务,可以是一下几种方式
                            //"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/china:china_map@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
                           "http://localhost:61477/maptile/{z}/{x}/{y}.pbf"
                           //"http://127.0.0.1:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=china:china_map&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}"
                        ]
                    }
                },
                "layers": [{
                    "id": "background",
                    //地图背景
                    "type": "background",
                    "layout": {},
                    "paint": {
                        "background-color": {
                            "base": 1,
                            "stops": [
                                [
                                    11,
                                    "hsl(35, 32%, 91%)"
                                ],
                                [
                                    13,
                                    "hsl(35, 12%, 89%)"
                                ]
                            ]
                        }
                    },
                    "interactive": true
                }, {
                    "id": "river",
                    "type": "line",
                    "source": "china",
                    "source-layer": "river",
                    "minzoom": 5,
                    "maxzoom": 15,
                    "paint": {
                        "line-color": "#a0cfdf",
                        "line-width": {
                            "base": 1.4,
                            "stops": [
                                [
                                    8,
                                    0.5
                                ],
                                [
                                    20,
                                    15
                                ]
                            ]
                        }
                    }
                }, {
                    "id": "lake",
                    "type": "fill",
                    "source": "china",
                    "source-layer": "lake",
                    "paint": {
                        "fill-color": "hsl(195, 50%, 75%)"
                    }
                }, {
                    "id": "road_major",
                    "type": "line",
                    "source": "china",
                    "source-layer": "road",
                    "minzoom": 4,
                    "maxzoom": 15,
                    "layout": {
                        "line-cap": "round",
                        "line-join": "round"
                    },
                    "paint": {
                        "line-width": {
                            "base": 1.5,
                            "stops": [
                                [
                                    5,
                                    0.75
                                ],
                                [
                                    18,
                                    32
                                ]
                            ]
                        },
                        "line-color": {
                            "base": 1,
                            "stops": [
                                [
                                    8,
                                    "hsl(26, 87%, 62%)"
                                ],
                                [
                                    9,
                                    "hsl(26, 100%, 68%)"
                                ]
                            ]
                        }
                    },
                    "interactive": true
                }, {
                    "id": "road--case",
                    "type": "line",
                    "source": "china",
                    "source-layer": "road",
                    "minzoom": 10,
                    "maxzoom": 15,
                    "layout": {
                        "line-cap": "round",
                        "line-join": "round"
                    },
                    "paint": {
                        "line-width": {
                            "base": 1.5,
                            "stops": [
                                [
                                    10,
                                    1
                                ],
                                [
                                    16,
                                    2
                                ]
                            ]
                        },
                        "line-color": "hsl(0, 0%, 100%)",
                        "line-gap-width": {
                            "base": 1.5,
                            "stops": [
                                [
                                    5,
                                    0.75
                                ],
                                [
                                    18,
                                    32
                                ]
                            ]
                        }
                    },
                    "interactive": true
                }, {
                    "id": "boundaries-bg",
                    "type": "line",
                    "source": "china",
                    "source-layer": "border",
                    "minzoom": 1,
                    "layout": {
                        "line-join": "miter"
                    },
                    "paint": {
                        "line-width": {
                            "base": 1,
                            "stops": [
                                [
                                    3,
                                    3.5
                                ],
                                [
                                    10,
                                    8
                                ]
                            ]
                        },
                        "line-color": {
                            "base": 1,
                            "stops": [
                                [
                                    6,
                                    "hsl(35, 12%, 89%)"
                                ],
                                [
                                    8,
                                    "hsl(230, 49%, 90%)"
                                ]
                            ]
                        },
                        "line-opacity": {
                            "base": 1,
                            "stops": [
                                [
                                    3,
                                    0
                                ],
                                [
                                    4,
                                    0.5
                                ]
                            ]
                        },
                        "line-translate": [
                            0,
                            0
                        ],
                        "line-blur": {
                            "base": 1,
                            "stops": [
                                [
                                    3,
                                    0
                                ],
                                [
                                    10,
                                    2
                                ]
                            ]
                        }
                    },
                    "interactive": true
                }, {
                    "id": "admin-2-boundaries",
                    "type": "line",
                    "source": "china",
                    "source-layer": "border",
                    "minzoom": 1,
                    "layout": {
                        "line-join": "round",
                        "line-cap": "round"
                    },
                    "paint": {
                        "line-color": "hsl(230, 8%, 51%)",
                        "line-width": {
                            "base": 1,
                            "stops": [
                                [
                                    3,
                                    0.5
                                ],
                                [
                                    10,
                                    2
                                ]
                            ]
                        }
                    },
                    "interactive": true
                }, {
                    "id": "provincepoint",
                    "type": "symbol",
                    "source": "china",
                    "source-layer": "provincepoint",
                    "maxzoom": 16,
                    "layout": {
                        "icon-image": "dot-11",
                        "text-font": {
                            "base": 1,
                            "stops": [
                                [
                                    7,
                                    [
                                        "Microsoft YaHei",
                                    ]
                                ],
                                [
                                    8,
                                    [
                                        "Microsoft YaHei",
                                    ]
                                ]
                            ]
                        },
                        "text-offset": {
                            "base": 1,
                            "stops": [
                                [
                                    7.99,
                                    [
                                        0,
                                        0.15
                                    ]
                                ],
                                [
                                    8,
                                    [
                                        0,
                                        0
                                    ]
                                ]
                            ]
                        },
                        "text-anchor": {
                            "base": 1,
                            "stops": [
                                [
                                    7,
                                    "top"
                                ],
                                [
                                    8,
                                    "center"
                                ]
                            ]
                        },
                        "text-field": "{name}",
                        "text-max-width": 7,
                        "text-size": {
                            "base": 0.9,
                            "stops": [
                                [
                                    4,
                                    12
                                ],
                                [
                                    10,
                                    22
                                ]
                            ]
                        }
                    },
                    "paint": {
                        "text-color": "hsl(0, 0%, 0%)",
                        "text-halo-color": "hsl(0, 0%, 100%)",
                        "text-halo-width": 1,
                        "icon-opacity": {
                            "base": 1,
                            "stops": [
                                [
                                    7.99,
                                    1
                                ],
                                [
                                    8,
                                    0
                                ]
                            ]
                        },
                        "text-halo-blur": 1
                    },
                    "interactive": true
                }, {
                    "id": "admin-3-4-boundaries",
                    "type": "line",
                    "source": "china",
                    "source-layer": "province",
                    "layout": {
                        "line-join": "round",
                        "line-cap": "round"
                    },
                    "paint": {
                        "line-dasharray": {
                            "base": 1,
                            "stops": [
                                [
                                    6,
                                    [
                                        2,
                                        0
                                    ]
                                ],
                                [
                                    7,
                                    [
                                        2,
                                        2,
                                        6,
                                        2
                                    ]
                                ]
                            ]
                        },
                        "line-width": {
                            "base": 1,
                            "stops": [
                                [
                                    7,
                                    0.75
                                ],
                                [
                                    12,
                                    1.5
                                ]
                            ]
                        },
                        "line-opacity": {
                            "base": 1,
                            "stops": [
                                [
                                    2,
                                    0
                                ],
                                [
                                    3,
                                    1
                                ]
                            ]
                        },
                        "line-color": {
                            "base": 1,
                            "stops": [
                                [
                                    3,
                                    "hsl(230, 14%, 77%)"
                                ],
                                [
                                    7,
                                    "hsl(230, 8%, 62%)"
                                ]
                            ]
                        }
                    },
                    "interactive": true
                }, {
                    "id": "admin-3-4-boundaries-bg",
                    "type": "line",
                    "source": "china",
                    "source-layer": "province",
                    "layout": {
                        "line-join": "bevel"
                    },
                    "paint": {
                        "line-color": {
                            "base": 1,
                            "stops": [
                                [
                                    8,
                                    "hsl(35, 12%, 89%)"
                                ],
                                [
                                    16,
                                    "hsl(230, 49%, 90%)"
                                ]
                            ]
                        },
                        "line-width": {
                            "base": 1,
                            "stops": [
                                [
                                    7,
                                    3.75
                                ],
                                [
                                    12,
                                    5.5
                                ]
                            ]
                        },
                        "line-opacity": {
                            "base": 1,
                            "stops": [
                                [
                                    7,
                                    0
                                ],
                                [
                                    8,
                                    0.75
                                ]
                            ]
                        },
                        "line-dasharray": [
                            1,
                            0
                        ],
                        "line-translate": [
                            0,
                            0
                        ],
                        "line-blur": {
                            "base": 1,
                            "stops": [
                                [
                                    3,
                                    0
                                ],
                                [
                                    8,
                                    3
                                ]
                            ]
                        }
                    },
                    "interactive": true
                }, {
                    "id": "road-rail",
                    "type": "line",
                    "source": "china",
                    "source-layer": "railway",
                    "minzoom": 5,
                    "layout": {
                        "line-join": "round"
                    },
                    "paint": {
                        "line-color": {
                            "stops": [
                                [
                                    10,
                                    "hsl(50, 17%, 82%)"
                                ],
                                [
                                    13,
                                    "hsl(230, 10%, 74%)"
                                ]
                            ]
                        },
                        "line-width": {
                            "base": 1.5,
                            "stops": [
                                [
                                    11,
                                    0.5
                                ],
                                [
                                    17,
                                    1
                                ]
                            ]
                        }
                    },
                    "interactive": true
                },
        {
            "id": "road-rail-tracks",
            "type": "line",
            "source": "china",
            "source-layer": "railway",
            "minzoom": 5,
            "layout": {
                "line-join": "round"
            },
            "paint": {
                "line-color": {
                    "stops": [
                        [
                           10,
                            "hsl(50, 17%, 82%)"
                        ],
                        [
                            13,
                            "hsl(230, 10%, 74%)"
                        ]
                    ]
                },
                "line-width": {
                    "base": 1.5,
                    "stops": [
                        [
                            11,
                            4
                        ],
                        [
                            17,
                            8
                        ]
                    ]
                },
                "line-dasharray": [
                    0.1,
                    15
                ],
                "line-opacity": {
                    "base": 1,
                    "stops": [
                        [
                            10.75,
                            0
                        ],
                        [
                            11,
                            1
                        ]
                    ]
                }
            },
            "interactive": true
        }, {
            "id": "place-city-sm",
            "type": "symbol",
            "source": "china",
            "source-layer": "countypoint",
            "minzoom": 6,
            "layout": {
                "text-size": {
                    "base": 1,
                    "stops": [
                        [
                            6,
                            12
                        ],
                        [
                            14,
                            22
                        ]
                    ]
                },
                "icon-image": "dot-9",
                "text-font": {
                    "base": 1,
                    "stops": [
                        [
                            7,
                            [
                                "Microsoft YaHei"
                            ]
                        ],
                        [
                            8,
                            [
                                "Microsoft YaHei"
                            ]
                        ]
                    ]
                },
                "text-offset": {
                    "base": 1,
                    "stops": [
                        [
                            7.99,
                            [
                                0,
                                -0.2
                            ]
                        ],
                        [
                            8,
                            [
                                0,
                                0
                            ]
                        ]
                    ]
                },
                "text-anchor": {
                    "base": 1,
                    "stops": [
                        [
                            7,
                            "bottom"
                        ],
                        [
                            8,
                            "center"
                        ]
                    ]
                },
                "text-field": "{name}",
                "text-max-width": 7
            },
            "paint": {
                "text-color": "hsl(0, 0%, 0%)",
                "text-halo-color": "hsl(0, 0%, 100%)",
                "text-halo-width": 1.25,
                "icon-opacity": {
                    "base": 1,
                    "stops": [
                        [
                            7.99,
                            1
                        ],
                        [
                            8,
                            0
                        ]
                    ]
                }
            },
            "interactive": true
        }, {
            "id": "county-primary",
            "type": "line",
            "source": "china",
            "source-layer": "county",
            "minzoom": 7,
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-width": {
                    "base": 1.5,
                    "stops": [
                        [
                            5,
                            0.75
                        ],
                        [
                            18,
                            32
                        ]
                    ]
                },
                "line-color": {
                    "base": 1,
                    "stops": [
                        [
                            5,
                            "hsl(35, 32%, 91%)"
                        ],
                        [
                            7,
                            "hsl(0, 0%, 100%)"
                        ]
                    ]
                },
                "line-opacity": 1
            },
            "interactive": true
        } , {
            "id": "landcover_crop",
                "type": "fill",
                "source": "china",
                "source-layer": "province",
                "maxzoom": 14,
                "layout": {},
                "paint": {
                    "fill-color": "hsl(75, 62%, 81%)",
                    "fill-opacity": {
                        "base": 1.5,
                        "stops": [
                            [
                                2,
                                0.3
                            ],
                            [
                                7,
                                0
                            ]
                        ]
                    },
                    "fill-antialias": false
                },
                "interactive": true
            }],
                "_ssl": true
            }
        });
        map.addControl(new mapboxgl.NavigationControl());
    </script>
</body>
</html>
